<template>
    <div class="demo2-box">
          <div ref="target" class="content" ></div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";

let target = ref(null);
let myChart = null;

onMounted(() => {
    myChart = echarts.init(target.value);
    renderChart();
});

let option =  {
        tooltip: {
          show: true // 弹层数据去掉
        },
    
        radar: {
          center: ['50%', '50%'], // 外圆的位置
          radius: '65%',
          axisName: {
              color: '#fff',
              fontSize: 12,
              fontWeight: 400,
              fontFamily: 'PingFangSC-Regular,PingFang SC',
              fontStyle: 'normal',
          },
          // TODO:
          indicator: [
            {
              name: '盈利能力',
              max: 100
            },
            {
              name: '股东获利能力',
              max: 100
            },
            {
              name: '偿债能力',
              max: 100
            },
            {
              name: '营运能力',
              max: 100
            },
            {
              name: '现金流量能力',
              max: 100
            },
            {
              name: '资产流动性',
              max: 100
            }
          ],
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['#1c2330'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          axisLine: {
            // 指向外圈文本的分隔线样式
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color:'#1781BA', // 分隔线颜色
              width: 1 // 分隔线线宽
            }
          }
        },
        series: [
          {
            type: 'radar',
            symbolSize: 5,
            data: [
              {
                // TODO:
                value: [80, 80, 80, 70, 60,50],
                name: '财务能力预警',
                areaStyle: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0, color: 'rgba(46,203,255, 0.14)' // 0% 处的颜色
                        }, 
                        {
                            offset: 0.15, color: 'rgba(46,203,255, 0.14)' // 100% 处的颜色
                        },
                        {
                            offset: 0.75, color: 'rgba(46,203,255, 0.4)' // 100% 处的颜色
                        },
                        {
                            offset: 1, color: 'rgba(46,203,255, 0.5)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                 emphasis: { // 折线拐点标志的样式。
                        lineStyle: {
                            width: 1
                        },
                        opacity: 0.3,
                        itemStyle : { // 高亮时的样式
                        lineStyle: {
                            width: 5
                        },
                        opacity: 0
                    }
                },
              },
            ]
          }
        ]
      }

const renderChart = () => {
    myChart.setOption(option);

    // 图表自适应
    window.addEventListener('resize', () => {
        myChart.resize()
    })
};
</script>
<style scoped lang='scss'>
.demo2-box {
    width: 100%;
    height: 100%;
    cursor: pointer;

    .content {
        width: 100%;
        height: 100%;
    }
}
</style>
